// 实现这个项目的构建任务
const {src,dest,parallel,series,watch}=require('gulp')
// const plugins.sass=require('gulp-sass') //转换sass 文件
// 下载一个转换插件css的插件 yarn add gulp-clean-css --dev
// const cleanCss=require('gulp-clean-css')
// 下载一个改名字后缀名的插件 yarn add gulp-rename --dev
// const renames=require('gulp-rename')
const style=()=>{
  return src('src/assets/styles/*.scss',{base:'src'})  //{base:'src'} 按照原本的位置输出
  // .pipe(cleanCss)
  .pipe(plugins.sass({outputStyle:'expanded'})) //转换sass 文件
  // .pipe(renames({extname:'.min.css'}))
  // .pipe(cleanCss)
  .pipe(dest('dist'))
}

// yarn add gulp-babel --dev  转换es5平台
// yarn add @babel/core @babel/preset-env --dev 转换es5具体操作
// const babel=require('gulp-babel')
const script=()=>{
  return src('src/assets/scripts/*.js',{base:'src'})
  .pipe(plugins.babel({presets:['@babel/preset-env']}))
  .pipe(dest('dist'))
}

// yarn add gulp-swig --dev 转换模板
const swig=require('gulp-swig')
const page=()=>{
  return src('src/**/*.html',{base:'src'})  //  **/任意子目录
  .pipe(plugins.swig({ data, defaults: { cache: false } }))
  .pipe(dest('dist'))
}

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}

// yarn add gulp-imagemin --dev 图片压缩
// const imagemin=require('gulp-imagemin')
const images=()=>{
  return src('src/assets/images/**',{base:'src'})
  .pipe(plugins.imagemin())
  .pipe(dest('dist'))
}

const font = () => { // 压缩字体
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}
const puli=()=>{ // 把public 转到dist
  return src('public/**',{base:'public'})
  .pipe(dest('dist'))
}

// yarn add del --dev 删除指定文件
const del=require('del')
const clean=()=>{
  return del(['dist'])
}

// yarn add browser-sync --dev
const browser=require('browser-sync') //开起服务器
const bs=browser.create()

const serve=()=>{
  watch('src/assets/styles/*.scss',style)
  watch('src/assets/scripts/*.js',script)
  watch('src/**/*.html',page)
  // watch('src/assets/images/**',images)
  // watch('src/assets/fonts/**',font)
  // watch('public/**',puli)

    watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)
  bs.init({
    notify:false,
    // port:2080 设置端口号的
    // open:false,启动项目是否自动打开
    files:'dist/**',//监听编辑器修改的文件保存之后 浏览器自动更新
    server:{
      baseDir:['dist','src','public'], //从前往后查找里面的文件
      routes:{
        '/node_modules':'node_modules'
      }
    }
  })
}





// yarn add gulp-useref --dev 解决页面指定node_module模块的文件
// yarn add gulp-if --dve  和压缩
const uglify=require('gulp-uglify')
const useref=()=>{
  return src('dist/*.html',{base:'dist'})
  .pipe(plugins.useref({searchPath:['dist','.']}))
  .pipe(plugins.if(/\.js$/, uglify())) //js压缩代码
  .pipe(plugins.if(/\.css$/, plugins.cleanCss())) //css压缩代码
  .pipe(plugins.if(/\.html$/, plugins.htmlmin({ //html压缩代码
      collapseWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    })))
  .pipe(dest('dist'))
}


//yarn add gulp-load-plugins --dev   解决插件多的 小插件 
const loadPlugins=require('gulp-load-plugins')
const plugins=loadPlugins();
const compile=parallel(style,script,page,images,font)  //把所有任务组合到一起 parallel同时执行
const build=series(clean,parallel(puli,compile))// 把所有任务组合到一起  series一个一个的执行
const develop=series(compile,serve)
module.exports={
  compile,
  build,
  serve,
  clean,
  develop,
  useref
}